<template>
  <div>
    hello world...
    <!-- 绑定ref属性 -->
    <button ref="btn">点击有惊喜哦</button>
    <input type="text" ref="ipt" />

    <!-- 使用组件 -->
    <Nav />
  </div>
</template>
<script>
import Nav from "./nav.vue";

/* ref 语法
    功能：
      1. 获取真实DOM元素
      2. 获取组件实例对象

    语法：
      1. 给元素绑定ref属性
      2. 通过 this.$refs.xxx 获取真实DOM元素 */

export default {
  name: "App",
  created() {
    console.log(this.$refs.btn);
  },

  beforeMount() {
    console.log(this.$refs.btn);
  },
  mounted() {
    console.log(this.$refs.btn);
    console.log(this.$refs.ipt);
  },

  // 注册组件
  components: {
    Nav,
  },
};
</script>

<style>
</style>

